import QtQuick

Rectangle {
    id: root
    width: 20
    height: 100
    color: "transparent"

    Component.onCompleted: {
        change_process_value(40);
    }

    property int downloadNum: 40

    Column {
        anchors.fill: parent
        spacing: 6

        Rectangle {
            id: bar
            width: parent.width
            height: 30
            color: "transparent"

            border.width: 2
            border.color: "black"
            radius: 6

            Rectangle {
                id: process_bar
                height: parent.height - 4
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 2
                width: 0
                color: "skyblue"
                radius: 4
            }
        }

        Rectangle {
            id: processInfo
            width: parent.width
            height: 20
            color: "transparent"

            Row {
                anchors.centerIn: parent
                spacing: 4
                Text {
                    text: "已下载:"
                }
                Text {
                    id: percentText
                    text: `${root.downloadNum} %`
                }
            }
        }
    }

    function change_process_value(value) {
        process_bar.width = root.width * 0.01 * value;
    }
}
